import React from "../src/react";
import ReactDOM from "../src/react-dom/client";
// import React from "react";
// import ReactDOM from "react-dom/client";
const ThemeContext= React.createContext();

const { Provider, Consumer } = ThemeContext;

const commonStyle = {
  margin: '5px',
  padding: '5px'
}

function Title(){
  return (
    <Consumer>
      {
        (contextValue) => (
          <div style={{
            ...commonStyle,
            border: `1px solid ${contextValue.color}`
          }}>
            title
          </div>
        )
      }
    </Consumer>
  )
}

class Header extends React.Component{
  static contextType = ThemeContext;

  render(){
    return (
      <div style={{  
        ...commonStyle,
        border: `1px solid ${this.context.color}`
      }}>
        Header
        <Title />
      </div>
    )
  }

}

function ThemeButton (props){
  return (
    <Consumer>
      {
        (contextValue) => <button onClick={() => contextValue.changeColor(props.color)}>{props.label}</button>
      }
    </Consumer>
  )
}

class Main extends React.Component{
  render(){
    return (
      <div>
        main 
        <ThemeButton label="变红" color="red"></ThemeButton>
        <ThemeButton label="变绿" color="green"></ThemeButton>
      </div>
    )
  }
}

class App extends React.Component{
  state = { color: 'red' }

  changeColor = (color) => {
    this.setState({ color })
  }
  
  render(){
    const contextValue = {
      color: this.state.color,
      changeColor: this.changeColor
    }
    return <Provider value={contextValue}>
      <div style={{  
          ...commonStyle,
          border: `1px solid ${contextValue.color}`
        }}>
        Page
        <Header />
        <Main />
      </div>
    </Provider>
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
